/**
 * @name Article
 * @description 文章详情
 * @author darcrand
 */

import React, { useEffect, useCallback, useMemo } from 'react'
import { useParams } from 'react-router-dom'
import { useSetState } from 'ahooks'
import { Divider, Avatar, Input, Anchor, BackTop } from 'antd'

import { apiGetArticleById } from '@/apis/articles'
import Header from '@/components-bussiness/Header'
import { MarkdownViewer } from '@/components-bussiness/MarkdownEditor'
import { CommentList, CommentItem } from './Comment'

import styles from './styles.module.less'

const Article = () => {
  const { id } = useParams()
  const [detail, setDetail] = useSetState({ id: '', title: '', content: '' })

  const getDetail = useCallback((id = '') => {
    const f = async () => {
      try {
        const res = await apiGetArticleById(id)
        setDetail(res)
      } catch (err) {
        console.error(err)
      }
    }
    f()
  }, [])

  useEffect(() => {
    if (id && id !== 'new') {
      getDetail(id)
    }
  }, [id])

  // 根据内容生成目录
  const toc = useMemo(() => {
    const regx = /[#]+\s{1}.*?\n/g

    if (detail.content) {
      const matchTitles = detail.content.match(regx)
      if (matchTitles && matchTitles.length > 0) {
        return (
          <Anchor offsetTop={50} style={{ padding: 10 }}>
            {matchTitles.map((v) => {
              const h = v.match(/[#]/g).length
              const title = v.replace(/[#]+\s{1}|\n/g, '')
              const id = title.replace(/\s+/g, '-').toLowerCase()

              // 这里只渲染 'h1-h3'
              // 另外由于'Anchor.Link'组件无法设置'style',只能用类来做缩进
              return h < 4 ? (
                <Anchor.Link key={title} href={`#${id}`} title={title} className={styles[`link_${h}`]} />
              ) : null
            })}
          </Anchor>
        )
      }
    }
  }, [detail])

  return (
    <>
      <Header />

      <div className={styles.container}>
        <main className={styles.content}>
          <section className={styles.author}>
            <Avatar size='large' />
            <div className={styles.info}>
              <div className={styles.name}>掘金嗖嗖嗖</div>
              <span className={styles.date}>2021年03月14日 阅读 5952</span>
            </div>
          </section>

          <h1 className={styles.title}>{detail.title}</h1>

          <MarkdownViewer value={detail.content} />

          <Divider />
          <CommentInput />

          <CommentList>
            <CommentItem>
              <CommentList isSub>
                <CommentItem />
                <CommentItem />
                <CommentItem />
                <CommentItem />
              </CommentList>
            </CommentItem>
            <CommentItem />
            <CommentItem />
            <CommentItem />
            <CommentItem />
          </CommentList>
        </main>

        <aside className={styles.aside}>{toc}</aside>
      </div>

      <BackTop />
    </>
  )
}

const CommentInput = () => {
  return (
    <div className={styles.comment_input}>
      <Avatar />
      <section className={styles.input_wrapper}>
        <Input.TextArea style={{ width: '100%' }} placeholder='说出你内心的想法' />
      </section>
    </div>
  )
}

export default React.memo(Article)
